<template>
	<view class="u-page">	
		<view class="loopimg">
			<u-swiper
				:list="loop_img" 
				:indicator="true" 
				height="220"
				imgMode="widthFix"
				:autoplay="true"
				interval="5000"
				radius="0"
				@click="clickImg" 
				bgColor="#ffffff">
			</u-swiper>
		</view>
		<view class="caigou">
			<view class="ton">
				<view :class="['li',activeTon==k?'active':'']" v-for="(v,k) in tontype" @click="changeTon(k)">{{v}}吨</view>
			</view>
			<view class="address">
				<text class="t1">配送地点：</text>
				<text class="t2">{{address}}</text>
				<view class="t3" @click="qiehuanLocal">
					<text class="tag-info">切换</text>
				</view>
			</view>
			<view class="bottom">
				<view class="input">
					<u-input
						:placeholder="'请输入计划采购'+goods.name+'的吨数'"
						prefixIcon="search"
						v-model="input"
						type="number"
						prefixIconStyle="font-size: 22px;color: #909399">
						<template slot="suffix">										
							<u-button
							    @click="inputTon"
								text="评估到货价格"
								type="success"
								size="small"
							></u-button>
						</template>
					</u-input>
				</view>
			</view>
		</view>
		<view class="tabs">
			<block v-for="(item,index) in spec">
			<view @click="changeTabs(index)" :class="['tab',current==index?'active':'']">{{item.name}}</view>
			</block>
		</view>
		<view class="oil-box" v-if="list.length>0">
			<view class="li head">
				<view class="item1">提货点</view>
				<view class="item2">距离</view>
				<view class="item3">自提价</view>
				<view class="item4">到货价</view>
				<view class="item5">操作</view>
			</view>
			<view :class="['li',index%2==0?'heng':'']" v-for="(item,index) in list">
				<view class="item1">{{item.name}}</view>
				<block v-if="item.min_number<=(input || activeTon) && item.distance && item.goods_price && item.delivery_price">
					<view class="item2">{{item.distance}}</view>
					<view class="item3">{{item.goods_price}}</view>
					<view class="item4">{{item.delivery_price}}</view>
					<view class="item5">
						<text class="xtags tag-info" v-if="item.delivery_price" @click="buy(index)">预购</text>
					</view>
				</block>
				<block v-else>
					<view class="item2">-</view>
					<view class="item3">-</view>
					<view class="item4">-</view>
					<view class="item5">-</view>
				</block>
			</view>
		</view>
		<u-empty v-if="list.length===0" mode="list" text="暂无商品!" :marginTop="120"></u-empty>
		<u-popup :show="show!==false" @close="show=false" mode="center">
			<view class="formbox" style="width:600rpx">
				<view class="item">
					<view class="title">品类：</view>
					<view class="txt">
						{{spec[current].name}}
					</view>
				</view>
				<view class="item">
					<view class="title">提货点：</view>
					<view class="txt">
						{{list[show].name}}
					</view>
				</view>
				<view class="item">
					<view class="title">数量：</view>
					<view class="txt">
						{{input || activeTon}}吨
					</view>
				</view>
				<view class="item">
					<view class="title">配送：</view>
					<view class="txt">
						<u-radio-group
						    v-model="delivery"
						    @change="changeDelivery">
						    <u-radio label="是" customStyle="width:150rpx;" :name="1"></u-radio>
							<u-radio label="否" customStyle="width:150rpx;" :name="0"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" v-if="delivery">
					<view class="title">配送到：</view>
					<view class="txt">
						{{address}}
					</view>
				</view>
				<view class="item" v-if="delivery">
					<view class="title">距离：</view>
					<view class="txt">
						{{list[show].distance}}
					</view>
				</view>
				<view class="item" v-if="delivery">
					<view class="title">到货价：</view>
					<view class="txt">
						￥{{list[show].delivery_price}}元/吨
					</view>
				</view>
				<view class="item" v-if="!delivery">
					<view class="title">自提价：</view>
					<view class="txt">
						￥{{list[show].goods_price}}元/吨
					</view>
				</view>
				<view class="item">
					<view class="title">合计：</view>
					<view class="txt">
						<text v-if="delivery">￥{{list[show].delivery_price*(input || activeTon)}}</text>
						<text v-else>￥{{list[show].goods_price*(input || activeTon)}}</text>
					</view>
				</view>
				<view class="bottom">
					<u-button type="error" text="取消采购" @click="show=false"></u-button>
					<u-button type="primary" text="提交订单" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	import {formatDateTime,inArray} from '@/utils/util.js';
	export default {
		data() {
			return {
				goods_id:'',
				goods:'',
				loop_img:[],
				customer:'',
				address:'',
				address_id:'',
				list:[],
				spec:[],
				tontype:{
					'10':10,
					'20':20,
					'30':30,
					'40':40,
					'50':50,
					'60':60
				},
				activeTon:'60',
				current:0,
				input:'',
				show:false,
				delivery:1
			}
		},
		onLoad(e){
			this.customer=this.$customer();
			if(!this.customer){
				this.$reLaunch('index/index');
				return;
			}
			this.goods_id=e.goods_id;			
			this.setGoodsSpec();
		},
		onShow() {
			this.getAddress();
		},
		onPullDownRefresh() {
			this.getBuying(true);
		},
		methods:{
			...methods,
			clickImg:function(e){
				uni.previewImage({
					urls:this.loop_img,
					current:e
				});
			},
			changeDelivery:function(e){
				this.delivery=parseInt(e);
			},
			setGoodsSpec:function(){
				let goods=this.customer.channel.xunjia_goods;
				for(let i=0;i<goods.length;i++){
					if(goods[i].id==this.goods_id){
						this.goods=goods[i];
						this.spec=goods[i].spec;
						this.loop_img=goods[i].img.split(',');
						return;
					}
				}
			},
			getAddress:function(){
				let address=uni.getStorageSync('address');
				if(address){
					this.address=address.mergename+','+address.detail;
					this.address_id=address.id;
					this.getBuying();
					uni.setStorageSync('address','');
				}else{
					for(let i=0;i<this.customer.address.length;i++){
						if(this.customer.address[i].is_default){
							this.address=this.customer.address[i].mergename+','+this.customer.address[i].detail;
							this.address_id=this.customer.address[i].id;
							this.getBuying();
							return;
						}
					}
				}
			},
			buy:function(index){
				this.show=index;
			},
			inputTon:function(){
				this.activeTon='';
				for(let k in this.tontype){
					if(k==this.input){
						this.activeTon=k;
					}
				}
				this.getBuying();
			},
			changeTon:function(t){
				this.activeTon=t;
				this.input=t;
				this.getBuying();
			},
			qiehuanLocal:function(){
				this.$navigateTo('buy/address/list?is_check=1');
			},
			changeTabs:function(index){
				this.current=index;
				this.getBuying();
			},
			getBuying:function(pulldown=false){
				this.$get('buy/xunjia',{
					address_id:this.address_id,
					customer_id:this.customer.id,
					goods_id:this.goods_id,
					spec_id:this.spec[this.current].id,
					number:this.input || this.activeTon
				}).then(res=>{
					this.list=res;
					uni.hideLoading();
					if(pulldown){
						uni.stopPullDownRefresh();
					}
				});
			},
			submit:function(){
				this.$post('buy/xunjiaOrder',{
					address_id:this.address_id,
					customer_id:this.customer.id,
					goods_id:this.goods_id,
					spec_id:this.spec[this.current].id,
					point_id:this.list[this.show].id,
					number:this.input || this.activeTon,
					delivery:this.delivery
				},true).then(res=>{
					this.show=false;
					uni.showModal({
						content:"提交成功，稍后会有客服联系您！",
						showCancel:false
					});			
				}).catch(err=>{
					this.show=false;
				});
			}
		}
	}
</script>

<style lang="scss">
@import "../common/form.scss";
.u-count-down__text>span{
	color: #fff;
}
.xtags{
	padding:8rpx 12rpx;
	position: relative;
	z-index: 9999;
}
.caigou{
	display: flex;
	flex-direction: column;
	height: 240rpx;
	justify-content: space-around;
	padding: 30rpx;
	padding-bottom: 0;
	.ton{
		display: flex;
		justify-content: space-between;
		.li{
			background-color: #d0d0d0;
			color: #474747;
			padding: 8rpx 16rpx;
			border-radius: 8rpx;
		}
		.li.active{
			background-color:#1296db;
			color: #fff;
		}
	}
	.address{
		display: flex;
		color: #7a7a7a;
		margin:10rpx 0;
		justify-content: space-between;
		.t1{
			width: 150rpx;
			font-size: 28upx;
		}
		.t2{
			width: 70%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 28upx;
			color: #1296db;
			text-align: left;
		}
		.t3{
			display: flex;
			justify-content: flex-end;
			width: 80rpx;
		}
	}
	
}

.tabs{
	display: flex;
	width: 100%;
	padding:0;
	font-weight: bold;
	border: 1px solid #e8e8e8;
	margin-top: 30rpx;
	.tab{
		width: 25%;
		text-align: center;
		padding: 20rpx 0;
		font-size: 26rpx;
	}
	.active{
		background-color: #1296db;
		color: #fff;
	}
}
.oil-box{
	font-size: 28rpx;
	.li{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20rpx 30rpx;
		border-top: 1px solid #e8e8e8;
		.item1{
			width: 200rpx;
		}
		.item2{
			width: 120rpx;
		}
		.item3{
			width: 110rpx;
		}
		.item4{
			width: 110rpx;
		}
		.item5{
			width: 80rpx;
			display: flex;
			justify-content: center;
		}
	}
	.head{
		font-weight: bold;
		color: #1296db;
		border-top: none;
	}
}
.formbox{
	.item{
		.title{
			font-weight: bold;
			width: 25%;
		}
		.txt{
			width: 75%;
		}
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		margin:0 -2%;
		.u-button{
			width: 46%;
		}
	}
}
</style>